@(geneSymbols: String)(implicit request: play.api.mvc.RequestHeader)
	@main("Search Results") {

		<link rel="stylesheet" media="screen" href="@routes.Assets.at("jquery-minicolors/jquery.minicolors.css")">

		<script src="@routes.Assets.at("jquery-minicolors/jquery.minicolors.js")" type="text/javascript"></script>

		<style>

				.radio, .checkbox {
					position: relative;
					display: block;
					margin-top: 5px;
					margin-bottom: 10px;
				}

				.form-group {
					margin-top: 20px;
				}

				.myDiv {
					margin-top: 20px;
				}

				.mySelected {
					background-color: #2aabd2;
					color: white;
				}

				.mySelected:hover {
					background-color: #2aabd2;
					color: white;
					cursor: default !important;
				}

				.imageType.mySelected {
					background-color: #FFC000;
					color: white;
				}

				.bold {
					font-weight: 700;
				}

		</style>

		<div class="row">
			<div class="form-group col-sm-12">
				<h2 class="page-heading"
				style="text-align: left;
					border-bottom: 5px solid #e9f3f4">Search Results</h2>
			</div>
		</div>

		<ul class="list-unstyled">

			<li><label class="label label-define label-primary">Gene symbol:</label>
				<span id="geneSymbols"></span>
			</li>
		</ul>

		<div id="imageResult">

			<h4 class="bold">Splicing pattern chart</h4>

			<ul class="list-unstyled">

				<li>
					<span id="imageType"></span>
				</li>
			</ul>

			<div class="btn-group" style="float: right">
				<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
				>
					<i class="fa fa-bars"></i>
				</a>
				<ul class="dropdown-menu pull-right">

					<li>
						<a href="javascript:;" onclick="Tool.downloadImage('genePatternImage', 'png')">
							Download PNG image
						</a>
					</li>

					<li>
						<a href="javascript:;" onclick="Tool.downloadImage('genePatternImage', 'jpeg')">
							Download JPEG image
						</a>
					</li>
					<li>
						<a href="javascript:;" onclick="Tool.downloadImage('genePatternImage', 'pdf')">
							Download PDF image
						</a>
					</li>
					<li>
						<a href="javascript:;" onclick="Tool.downloadImage('genePatternImage', 'svg')">
							Download SVG image
						</a>
					</li>

				</ul>
			</div>

			<div id="charts" align="center">
				<input type="hidden" name="pdfBase64">

				<ul class="list-unstyled" style="float: right;display: none;
					padding-right: 15px" id="lbMethod">

					<select class="form-control myMethod" name="method" style="width: 100%">
						<option value="all">All</option>
						<option value="specific">Tumor-specific</option>
						<option value="unannotated">Unannotated</option>
					</select>

				</ul>

				<img src="" id="genePatternImage" data-basic-type="png" style="width: 100%">
			</div>

		</div>


		<div id="content" style="display: block" >

			<div id="linear" class="myDiv">
				<h4 class="bold">Linear splice junction</h4>

				<label>Select the columns to display:</label>
				<div id="checkbox" class="checkbox"></div>

				<table class="display table table-bordered" id="table" data-pagination="true"
				data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100]" data-multiple-search="true"
				style="word-wrap: break-word;">
					<thead>

					</thead>
				</table>
			</div>

			<div id="back" class="myDiv">
				<h4 class="bold">Back-splice junction</h4>

				<label>Select the columns to display:</label>
				<div id="checkbox" class="checkbox"></div>

				<table class="display table table-bordered" id="table" data-pagination="true"
				data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100]" data-multiple-search="true"
				style="word-wrap: break-word;">
					<thead>

					</thead>
				</table>
			</div>

			<div id="fusionContent" class="myDiv">
				<h4 class="bold">Fusion  junction</h4>

				<label>Select the columns to display:</label>
				<div id="checkbox" class="checkbox"></div>

				<table class="display table table-bordered" id="table" data-pagination="true"
				data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100]" data-multiple-search="true"
				style="word-wrap: break-word;">
					<thead>

					</thead>
				</table>
			</div>

		</div>

		<script>

				var geneSymbols = "@geneSymbols"
				$(function () {

					$('.demo').each(function () {
						$(this).minicolors({
							control: $(this).attr('data-control') || 'hue',
							defaultValue: $(this).attr('data-defaultValue') || '',
							format: $(this).attr('data-format') || 'hex',
							keywords: $(this).attr('data-keywords') || '',
							inline: $(this).attr('data-inline') === 'true',
							letterCase: $(this).attr('data-letterCase') || 'lowercase',
							opacity: $(this).attr('data-opacity'),
							position: $(this).attr('data-position') || 'bottom',
							swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
							change: function (value, opacity) {
								if (!value) return;
								if (opacity) value += ', ' + opacity;
								if (typeof console === 'object') {
								}
							},
							theme: 'bootstrap'
						});

					});

					SearchResult.init
				})

				function myReset() {
					$('.demo').minicolors("value", {color: "#C21807"})
				}

		</script>


	}
